import React from 'react'
import { Form,Icon,Input,Button,Checkbox } from 'antd';
import { connect } from 'dva'
import styles from './Login.less'

class AccountLoginForm extends React.Component{	
	render(){
		const { getFieldDecorator } = this.props.form;
		return (
			<Form onSubmit={this.handleSubmit.bind(this)} className="login-form">
	    		<Form.Item>
	    			{
	    				getFieldDecorator("name",{
	    					rules:[{
	    						required:true,
	    						message: 'Please input your name!'
	    					}]
	    				})(
	    					<Input
      							prefix={
      								<Icon 
      									type="user" 
      									style={{ color: 'rgba(0,0,0,.25)' }} 
      									/>
      								}
      							placeholder="用户名: admin or user"
    						/>
	    				)
	    			}
	    		</Form.Item>
	    		<Form.Item>
	    			{
	    				getFieldDecorator("password",{
	    					rules:[{
	    						required:true,
	    						message: 'Please input your password!'
	    					}]
	    				})(
	    					<Input
      							prefix={
      								<Icon 
      									type="lock" 
      									style={{ color: 'rgba(0,0,0,.25)' }} 
      									/>
      								}
      							placeholder="密码: ant.design"
    						/>
	    				)
	    			}
	    		</Form.Item>	
	    		 <Form.Item>
          			{
          				getFieldDecorator('remember', {
			            	valuePropName: 'checked',
			            	initialValue: true,
			          	})(
			          		<Checkbox>Remember me</Checkbox>
			          	)
			        }
			    	{/* 源码中此处span是a标记，react认为使用a标记又不是其默认href的话就不要用啦，用其他标记 + 样式 + onClick解决 */}
          			<span className={styles.loginFormForgot}>Forgot password</span> 
          			<Button type="primary" htmlType="submit" className={styles.loginFormButton}>
            			Log in
          			</Button>
          			Or <a href="">register now!</a>
        		</Form.Item>
	    	</Form>
		)
	}
	handleSubmit = evt => {
		evt.preventDefault();
	    this.props.form.validateFields((err, values) => {
	    	if (!err) {
	        	var res=this.props.dispatch({
	        		type:"app/getUser",
	       			payload:values
	       		});
                //ant design pro使用afterLogin的思路，我试试不这么写。   
                // res.then((response)=>{
                //     this.afterLogin(response);
                // });  
            }             
        });
    };
}

export default Form.create({ 
	name: 'account_login' 
})(connect(function(state){
	return {
		user:state.app.user
	}
})(AccountLoginForm));


// 我们知道下面语法是错误的：
// 	var m=1;
// 	export m;
//  需要写成：
// 	export var m1=;
//  但是尝试写成这样：
// 	    export default var m=1;
//  这种写法也是错误的，这就涉及es6一个比较难以理解的语法问题，“导出的必须是变量”
// 	export m;这个时候m相当于1，语法上相当于exprot 1，这就导出了一个常量1，这样语法是不允许的；
// 	export default m;这种写法是可以的，本质上说，语句：
//  export default decreaseAction
//  中的default是一种特殊的系统变量，export default的含义是把此命令后面的变量赋值给default这个特殊的系统变量，
// 	并把它导出到其他模块中使用。如此一来，
// 	export default const...或者export default var...等语句就是非常明显的错误了。	

// 表单独立成组件这点也没有太多指的怀疑，组件化开发就是干这个的，这要熟悉ant desing的风格：
// 	1> 需要使用Form.create()返回高阶组件的封装、使用<Form>、<Form.Item>嵌套包装组件、自带验证功能......
// 	2> "记住我"功能，在h5时代一般都是LocalStorage而不再用cookie，这要求状态管理数据默认值要从localStoreage中取，
// 		取不到则认为用户没有登录或已经注销，这些都是传统。

// 	3> ant design使用同步表单，这就是说使用submit button，这显然不是我的风格，因为同步表单，所以在submit事件
// 		中第一件事就是evt.preventDefault()否则页面真的同步跳转出去了。
// 		第二ant design自动注入values，他是表单域键值对json数据，当然包含验证，有了这些所有的业务都没有问题啦。

// 	3.1> 比较一下3在jquery时代如何实现?我的处理方式是：
// 		按钮使用普通按钮，使用click事件提交，这个按钮也可以位于Form之外，
// 		验证试验jquery.validate.js插件，而表单使用form.valid()方法在固定位置显示错误提示。
// 		数据获取使用form.serialize()，如果需要json则需要自己扩展jquery插件serializeObject()方法，
// 			juqery原始没有这个方法。

// 	3.2> 对比3如果没有表单插件，我们手写如何解决?
// 		按钮使用onClick：提交是提交的是state数据;
// 		表单域全部使用受控表单，这就要求有state数据与之对应，同时表单域需要onChange事件，在事件回调函数
// 			中叫evt.target.value的值setState上。
// 		手动验证state或者借助别人开发的验证插件，也可以自己写一个。	
//	4> 登录验证不通过如何提示?	

/**
 * 原生react-redux的写法上，connect第二个参数函数中注入store.dispatch，我们在这个函数中返回的内容经过dispatch处理作为函数方法供view调用。
 *      这有点类型vuex mapActions(['namespace'],{})辅助函数。
 *      需要注意的是dva这里没有使用第二个参数，而是直接使用this.props.dispatch(action)。
 */

	  			